<template>
  <div class="main">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
      <div class="film-info" v-for="item in list" :key="item.filmId">
      <van-card class="film-card">
        <template #thumb>
          <img :src="item.poster" alt="item.name">
        </template>
        <template #title>
          <div class="film-name">{{item.name}}</div>
        </template>
        <template #desc>
          <div class="audience-score">观众评分：<span class="score">{{item.grade}}</span></div>
          <div class="starring">主演：{{item.actors | parseActor}}</div>
          <div class="countries">{{item.nation}} | {{item.runtime}}分钟</div>
        </template>
      </van-card>
      <div class="buyBn"><van-tag plain type="primary" size="large" color="#ff5f16" text-color="#ffb232">购票</van-tag></div>
    </div>
    </van-list>
  </div>
</template>

<script>
import url from '@/config/url'
import Vue from 'vue'
import { Card, Tag, List } from 'vant'

Vue.use(Card)
Vue.use(Tag)
Vue.use(List)
export default {
  data () {
    return {
      page: 1,
      list: [],
      total: 0,
      loading: false,
      finished: false,
      cityId: localStorage.getItem('cityId') || 110100
    }
  },
  methods: {
    loadData () {
      this.$http
        .get(url.nowPlaying, {
          params: {
            pageNum: this.page,
            cityId: this.cityId
          }
        })
        .then((res) => {
          console.log(res)
          this.list = [...this.list, ...res.data.data.films]
          this.total = res.data.data.total
          if (Math.ceil(this.total / 10 > this.page)) {
            this.page = this.page + 1
          } else {
            this.finished = true
          }
          this.loading = false
        })
    }
  },
  filters: {
    parseActor (actors) {
      if (actors) {
        const str = actors.reduce((v, el) => {
          return v + ' ' + el.name
        }, '')
        return str
      } else {
        return '暂无主演'
      }
    }
  }
}
</script>

<style lang='scss' scoped>
*{
  box-sizing: border-box;
}
.main{
  margin-bottom: 50px;
  margin-left: 15px;
  font-size: 13px;
  line-height: 1.5;
  .film-info{
    padding: 15px 15px 15px 0;
    height: 124px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ededed;
    .film-card{
      width: 80%;
      padding: 0;
      background: white;
      .van-card__thumb{
        width: 66px;
        height: 92px;
      }
      .film-name{
        font-size: 16px;
      }
      .starring{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      img{
        width: 66px;
        height: 92px;
        border-radius: 0;
      }
      .score{
        font-size: 14px;
        color: #ffb232;
      }
    }
    .buyBn{
      width: 20%;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
